<template>
  <div class="resetpassword">
    <van-form ref="form1" class="form" @submit="onSubmit">
      <van-field
        class="phone"
        v-model="obj.phoneNumber"
        name="phoneNumber"
        label=""
        placeholder="请输入手机号码"
        :rules="[{ required: true, validator: validPhoneNum, message: '' }]"
      />
      <van-field
        class="yzm"
        v-model="obj.verifyCode"
        name="verifyCode"
        label=""
        placeholder="请输入短信验证码"
        :rules="[{ required: true, message: '' }]"
      >
        <template #right-icon>
          <div class="sendcode" @click="sendPhoneCode">
            {{ msg }}
          </div>
        </template>
      </van-field>
      <div class="submit-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="保存"
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Button, Col, Field, Form, Icon, Row, Divider, Toast } from 'vant'
import icon1 from '@/assets/img/forgetPassword/icon1.png'
import lineIcon from '@/assets/img/forgetPassword/line-icon.png'
import { postHandle, getHandle } from '@/api'
import crypto from 'crypto'
import { getValue, setValue, setObject, clear } from '@/utils/auth'
// import { userService as user } from '@/services'
// import {checkVerifyCodeForGetPassword, updatePasswordByPhoneNumber} from '../../services/user'
export default {
  name: 'ResetPassword',
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    [Divider.name]: Divider
  },
  data() {
    return {
      icon1,
      lineIcon,
      loading: false,
      username: null,
      msg: '获取验证码',
      active: 0,
      yzmFlag: true,
      obj: {
        phoneNumber: null,
        verifyCode: null,
        password: null,
        rePassword: null
      }
    }
  },
  computed: {
    color() {
      let color = '#DDDDDD'
      if (this.active == 1) {
        color = '#37B5B5'
      }
      return color
    }
  },
  methods: {
    // 校验新密码位数
    validPassword(val) {
      var reg = /^[0-9a-zA-Z]{6,20}$/
      if (reg.test(val)) return true
      Toast.fail('请设置6到20位密码长度')
      return false
    },
    // 校验手机号码格式正确性
    validPhoneNum(val) {
      var reg = /^((\+?86)|(\(\+86\)))?(1[0-9]{10})$/
      if (reg.test(val)) return true
      Toast.fail('手机号码格式不正确!')
      return false
    },
    sendPhoneCode() {
      console.log(this.$refs)
      if (this.obj.phoneNumber != '') {
        if (this.yzmFlag) {
          this.$refs.form1.validate('phoneNumber').then(res => {
            if (!res) {
              //  手机号码sha1加密
              var sha1 = crypto.createHash('sha1')
              sha1.update(this.obj.phoneNumber.split('').reverse().join(''))
              const phoneNumber_sha = sha1.digest('hex')
              const params = {
                tenantCode: 'T000010',
                phoneNumber: this.obj.phoneNumber,
                isSend4NewPhone: 1,
                sign: phoneNumber_sha.substring(10, 20)
              }
              postHandle('/agri/api/common/tenant/sendVerifyCodeForModifyPhone', params).then(res => {
                console.log(res)
                if (res.status == 0) {
                  this.$toast.success('验证码发送成功')
                  this.yzmFlag = false
                  let n = 60
                  const inter = setInterval(() => {
                    this.msg = `已发送${n}秒`
                    n--
                    if (n == 0) {
                      clearInterval(inter)
                      this.yzmFlag = true
                      this.msg = `获取验证码`
                    }
                  }, 1000)
                } else {
                  this.$toast.fail(res.msg)
                }
              })
            }
          })
        } else {
          this.$toast.fail('请勿重复点击')
        }
      } else {
        this.$toast.fail('手机号码不能为空')
      }
    },
    onSubmit() {
      this.loading = true
      const params = {
        tenantCode: 'T000010',
        phoneNumber: this.obj.phoneNumber,
        verifyCode: this.obj.verifyCode
      }
      postHandle('/agri/api/common/tenant/updateMobilePhone', params).then(res => {
        console.log(res)
        if (res.status !== 0) {
          Toast.fail(res.msg)
          this.loading = false
          return
        } else {
          setValue('mobilePhone', this.obj.phoneNumber)
          Toast.success('修改成功')
          this.$bridge.call('base.closePage')
        }
        this.loading = false
      })
    },
    validator(val) {
      if (val === this.obj.password) {
        return true
      } else {
        // Toast.fail('两次输入的密码不一致!')
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.resetpassword {
  height: 100vh;
  background: #f7f7f7;

  .form {
    .van-cell {
      line-height: 30px;
      padding: 10px 20px;
    }
    .van-cell::after {
      border-bottom: 1px solid #dddddd;
      right: 0;
      left: 0;
    }
    .sendcode {
      font-size: 14px;
      color: #37b5b5;
    }
  }
  .submit-btn {
    margin: 40px 30px;
  }
}
div.yzm.van-cell.van-field,
div.new.van-cell.van-field {
  height: 55px;
}
div.phone.van-cell.van-field,
div.old.van-cell.van-field {
  height: 55px;
}
div.yzm.van-cell.van-field::after,
div.new.van-cell.van-field::after {
  width: 345px;
  border-bottom: none;
  right: 15px;
  left: 15px;
}
div.phone.van-cell.van-field::after,
div.old.van-cell.van-field::after {
  width: 345px;
  border-bottom: 1px solid #eee;
  right: 15px;
  left: 15px;
}
</style>
